<template>
    <div>
      <button @click="getDataList">查询城市</button>
      <br>
      <div v-for="item in content" :key="item">
        {{item.name}}
      </div>
      <!-- <div v-for="(ele,idx) in arr" :key="idx">
      <h1>{{ ele }}</h1>
      <p v-for="(city,idx) in cities" :key="'name'+ idx">{{ city.pinyin.charAt(0).toUpperCase()===ele ? city.name : '' }}</p>
      </div> -->
    </div>
  </template>
  
  <script>
  
  export default {
    data(){
      return{
        content: ''
      }
    },
    methods:{
      getDataList(){
        this.$axios({
          headers:{
            'X-Host':'mall.film-ticket.city.list'
          }, 
          url: 'https://m.maizuo.com/gateway',
          params:{
            k:'4374473' 
          }
        }).then(res => {
          this.content = res.data.data.cities
          // this.content.sort((a,b)=>{
          //   return a.pinyin.localeCompare(b.pinyin)
          })
        //   this.content.forEach(info => {
        //     this.arr[this.idx++]= info.pinyin.charAt(0).toUpperCase()
        //   })
        //   this.arr=new Set(this.arr)
        //   this.loading=false
        // })
      }
    }
  }
  </script>
  
  <style>
  
  </style>